<script>
  import { onMount } from "svelte";
  import {
    loading,
    error,
    loadTodos,
    toggleDone,
    deleteTodo,
    addTodo,
  } from "../../api";
  import { todos } from "../../store/todo";
  import { get } from "svelte/store";
  import { Link } from "svelte-routing";
  let newTodo = "";
  // @ts-ignore
  export const name = "todoList";

  onMount(() => {
    loadTodos();
    console.log(get(todos));
  });

  function handleAddTodo() {
    if (newTodo.trim()) {
      addTodo(newTodo);
      newTodo = "";
    }
  }
  // function gotoTodoDetail(id) {
  //   navigate(`/todo/${id}`);
  // }
</script>

<div
  class=" transition-colors duration-300
            bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100"
>
  <div class="max-w-md mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold mb-6">
      <i class="fas fa-list-ul mr-2"></i>Todo List
    </h1>

    {#if $loading}
      <div class="text-center py-8">
        <i class="fas fa-spinner fa-spin text-2xl text-gray-500"></i>
        <p class="mt-2 text-gray-500 dark:text-gray-400">加载中...</p>
      </div>
    {:else if $error}
      <div
        class="bg-red-100 dark:bg-red-900/30 border border-red-400 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded mb-4"
      >
        <i class="fas fa-exclamation-circle mr-2"></i>{$error}
      </div>
    {:else}
      <div class="flex gap-2 mb-6">
        <input
          type="text"
          bind:value={newTodo}
          placeholder="添加新任务..."
          on:keydown={(e) => e.key === "Enter" && handleAddTodo()}
          class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-700
                rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500
                dark:bg-gray-800 dark:text-white"
        />
        <button
          on:click={handleAddTodo}
          class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
        >
          <i class="fas fa-plus mr-1"></i> 添加
        </button>
      </div>

      <ul class="space-y-2">
        {#if $todos && $todos.length}
          {#each $todos as todo (todo?.id)}
            <li
              class="flex items-center p-3 rounded-lg border
                    border-gray-200 dark:border-gray-700
                    bg-white dark:bg-gray-800 transition-colors"
            >
              <input
                type="checkbox"
                checked={todo.done}
                on:change={() => toggleDone(todo.id, todo.done)}
                class="mr-3 h-5 w-5 rounded-full text-blue-500 focus:ring-blue-500"
              />
              <!-- <a class="inline-block" href="/todos/{todo.id}"> -->
              <Link to={`/todos/${todo.id}`}>
                <!--<div on.event:click={() => gotoTodoDetail(todo.id)} > -->
                <span
                  class:line-through={todo.done}
                  class:opacity-50={todo.done}
                >
                  {todo.text}
                </span>
                <!-- </div> -->
              </Link>
              <!-- </a> -->
              <button
                on:click={() => deleteTodo(todo.id)}
                class="ml-auto p-2 text-red-500 hover:text-red-700 hover:bg-red-100 dark:hover:bg-red-900/30 rounded transition-colors"
                aria-label="删除任务"
              >
                <i class="fas fa-trash"></i>
              </button>
            </li>
          {:else}
            <li class="text-center py-4 text-gray-500 dark:text-gray-400">
              暂无待办事项
            </li>
          {/each}
        {/if}
      </ul>
    {/if}
  </div>
</div>
